React Tips — Restricted Routes, Booleans, Wrapping, and Select Values

React is a popular library for creating web apps and mobile apps.

In this article, we’ll look at some tips for writing better React apps.

Restrict Access to Routes in React Router

We can restrict access to routes by checking for credentials.

Then we can return the component if the credentials are valid.

Otherwise, we redirect to the path that we want to redirect to.

For instance, we can write:

export default function AuthenticatedRoute({ component: Component, appProps, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        appProps.isAuthenticated
          ? <Component {...props} {...appProps} />
          : <Redirect
              to={`/login?redirect=${props.location.pathname}${props.location.search}`}
            />}
    />
  );
}

export default function App() {
  const [authenticated, setAuthenticated] = useState(false);

  useEffect(() => {
    onLoad();
  }, []);

  async function onLoad() {
    try {
      await getSession();
      setAuthenticated(true);
    } catch (e) {
      console.log(e);
    }
  }

  return (
    <div>
      <Switch>
        <AuthenticatedRoute
          path="/profile"
          component={Profile}
          appProps={{ authenticated }}
        />
        <Route component={Login} path="/login" />
      </Switch>
    </div>
  );
}

We created the AuthenticatedRoute that takes the component we want to restrict.

We check for the credentials in the component.

Then if it’s valid, we return the component to render it.

Otherwise, we return the Redirect component to redirect to the login route.

Toggle Boolean State of React Component

We can toggle the boolean state of a React component by calling setState with the opposite value of the state that we have now.

For instance, we can write:

class A extends React.Component {
  constructor() {
    super()
    this.handleCheckBox = this.handleCheckBox.bind(this)
    this.state = {
      checked: false
    }
  }

  handleCheckBox(e) {
    this.setState({
      checked: e.target.checked
    })
  }

  render(){
    return <input type="checkbox" onChange={this.handleCheckBox} checked={this.state.checked} />
  }
}

We have a checkbox that we passed the this.handleCheckBox method to update the checked state.

Then we update the state by calling setState in there.

Then we set the checked prop to the this.state.checked state.

With function components, we can write:

import React from "react";

function App(props) {
  const [toggled, setToggled] = React.useState(false);

  return  (
    <button
      onClick={(event) => {
       setToggled(!toggled);
     }}
    >
      {toggled.toString()}
    </button>;
}

We set the toggled state when we click the button to the opposite of the existing value of the toggled state.

Then we see what we have by setting the string as version of toggled as the content of the button.

Default Export of a Component

To export a component as a default export, we can write:

const Header = () => {
  return <p>hello</p>
};
export default Header;

or:

export default () => (
  <p>hello</p>
)

We define our const variable separately and then we export it.

Or we export the component directly.

Conditionally Wrap a React component

To conditionally wrap a React component, we can create a higher-order component to do the conditional wrapping.

For instance, we can write:

const WithLink = ({ link, className, children }) => (link ?
  <a href={link} className={className}>
    {children}
  </a>
  : children
);

const Link = ({ link, className, count }) => {
  return (
    <WithLink link={link} className={className}>
      <i className={styles.Icon}>
        {count}
      </i>
    </WithLink>
  );
}

We created a WithLink higher-order component to get the link and then use that to check if we should put a wrapper around our component.

Then in our Link component, we get the link and className props and pass them into the WithLink component.

We pass the count prop into the icon class.

Get Values from a <select> Element with Multiple Option in React

We can create a component with the select element that can accept multiple selections.

Then we can add an onChange handler to get the options from the select element.

For instance, we can write:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      multiValue: []
    }
  }

  handleChange(e) {
    this.setState({ multiValue: [...evt.target.selectedOptions].map(o => o.value) });
  }

  render() {
    return (
      <select multiple value={this.state.multiValue} onChange={this.handleChange}>
        <option value='apple'>Apple</option>
        <option value='orange'>Orange</option>
        <option value='grape'>Grape</option>
      </select>
    );
  }
}

We get all the selected options with the evt.target.selectedOptions property.

Then we map each entry to their value by returning the value property.

Conclusion

We can get all the selected values of the multiple select elements with the evt.target.selectedOptions.

Also, we can create restricted routes with React Router.

And we can toggle a boolean state when we do something to a React component.